<template>
	<view class="indexs">
		<view :class="'header ' + (banertrue ? 'header_lan' : '')" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img22.png'" mode="widthFix"></image></view>
					<view class="index_wenben baise">{{ $t('page_my_shenqingcy.apply_for_inspection') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_banner" style="position: absolute; background: #fff"><image :src="imgUrl + '/dzx_img148.png'" mode="widthFix"></image></view>

		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;'">
			<view class="my_shenqingcy_input">
				<view class="my_shenqingcy_inputs">
					<image :src="imgUrl + '/dzx_img149.png'"></image>
					<input type="text" :placeholder="$t('page_my_shenqingcy.please_enter_tracking_number')" @confirm="huiche" />
				</view>
			</view>
			<view class="mys_jifen">
				<view class="mys_jifen_center">
					<view class="index_swiper">
						<!--Tab布局-->
						<view class="index_title">
							<block v-for="(item, index) in malllist" :key="index">
								<view :data-id="index" :class="'mall_dis ' + (currentIndex == index ? 'mall_on' : '')" @tap="getcurrentid">
									<view class="mall_t1">{{ item.name }}</view>
								</view>
							</block>
							<view class="mys_xians_po" :style="'width:' + width + 'px;left:' + left + 'px;'"><view class="mys_xians"></view></view>
						</view>
						<!--内容布局-->
						<view class="index_list">
							<swiper class="swiper paid_list_cont" @change="pagechange" :current="currentIndex" :style="'height:' + height + ';'">
								<block v-for="(item, index) in malllist" :key="index">
									<swiper-item>
										<view :class="'index_list_heji' + index">
											<view class="mys_shenqingcy_list" v-if="arrlist.length != 0">
												<view class="mys_shenqingcy_cont" v-for="(item, index1) in arrlist" :key="index1">
													<view class="mys_shenqingcy_cont_title">
														<view class="mys_shenqingcy_cont_l">
															<image :src="imgUrl + '/dzx_img27.png'"></image>
															<text>{{ $t('page_my_shenqingcy.parcel_no') }}：{{ item.express_num }}</text>
														</view>
														<view class="mys_shenqingcy_cont_r" :style="item.status == 3 ? 'color:#4ad5ac;' : ''">
															{{ item.status == 2 ? $t('page_my_shenqingcy.Goods_inspected') : $t('page_my_shenqingcy.Inspected_goods') }}
														</view>
													</view>

													<view class="mys_shenqingcy_cont_dis">
														<view class="mys_shenqingcy_cont_t1">{{ $t('page_my_shenqingcy.shipping_country') }}：{{ item.country.title }}</view>
														<view class="mys_shenqingcy_cont_t1">{{ $t('page_my_shenqingcy.Item_information') }}：{{ item.class_name }}</view>
														<view class="mys_shenqingcy_cont_t1">{{ $t('page_my_shenqingcy.reporting_time') }}：{{ item.created_time }}</view>
													</view>
												</view>
											</view>
											<view class="my_dingdan_zanwu" v-else>
												<image :src="imgUrl + '/dzx_img43.png'"></image>
												<text>{{ $t('page_my_shenqingcy.no_order_yet') }}</text>
											</view>
										</view>
									</swiper-item>
								</block>
							</swiper>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// pages/shouye/shouye_zkc/shouye_zkc.js
const app = getApp();

let request = require('../../../utils/require');

export default {
	data() {
		return {
			navH: app.globalData.navHeight,
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,
			banertrue: false,
			malllist: [
				{
					id: 0,
					name: '全部查验'
				},
				{
					id: 2,
					name: '待验货'
				},
				{
					id: 3,
					name: '已验货'
				}
			],
			height: 0,
			heights: 0,
			currentIndex: 0,
			left: 16,
			false: false,
			width: 0,
			//分页
			page: 1,
			ispage: true,
			arrlist: [],
			type: 0,
			//0全部，2待查验，3已查验
			keyword: ''
		};
	}, //滑动显示顶部
	onPageScroll: function(e) {
		if (e.scrollTop > this.navH + 50) {
			this.banertrue = true
		} else {
			this.banertrue = false
		}
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad() {
		var that = this;
		that.changeline();
	},
	onShow() {
		var that = this;
		that.page= 1
		that.ispage=true
		that.arrlist= []
		that.chayanlist(that.type);
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {
		if (this.ispage) {
			this.page= this.page + 1
			this.chayanlist(this.type);
		}
	},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {},
	methods: {
		huiche(e) {
			this.keyword= e.detail.value
			this.page= 1
			this.ispage= true
			this.arrlist= []
			this.chayanlist(this.type);
		},

		chayanlist(e) {
			var that = this;
			var data = {
				status: e,
				token: uni.getStorageSync('token'),
				page: that.page,
				keyword: that.keyword
			};
			request.get(`index.php?s=/api/package/verify&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					if (that.page > res.data.data.last_page) {
						that.ispage= false
					} else {
						that.arrlist= that.arrlist.concat(res.data.data.data)
					}

					that.swiperhegiht(that.currentIndex);
				}
			});
		},

		//swiper切换时会调用
		pagechange: function(e) {
			var that = this;
			that.currentIndex= e.detail.current
			that.page= 1
			that.ispage= true
			that.arrlist= []
			that.type= that.malllist[e.detail.current].id
			that.keyword= ''
			that.chayanlist(that.type);
			that.changeline();
		},

		//swiper单击事件
		getcurrentid(e) {
			this.currentIndex= e.currentTarget.dataset.id
		},

		//swiper选项卡的高度
		swiperhegiht(es) {
			var that = this;
			var query = uni.createSelectorQuery();
			query.selectAll('.index_list_heji' + es).boundingClientRect();
			query.exec(res => {
				var listHeight = res[0][0].height;
				that.height = listHeight + 'px'
				that.heights = res[0]
			});
		},

		//下标线左右滑动效果
		changeline: function(e) {
			const query = uni.createSelectorQuery();
			var that = this;
			console.log(e);
			query.select('.mall_on').boundingClientRect();
			query.exec(function(res) {
				console.log(res, '????');

				if (res[0] != null) {
					that.left= res[0].left
					that.width= res[0].width
				} else {
					that.left= 0
				}
			});
		},

		jumpzuo() {
			uni.navigateBack();
		}
	}
};
</script>
<style>
@import './my_shenqingcy.css';
</style>
